<template>
	<div class="nlp-input-container">
		<p class="margintop nlpSetting">
			<el-button class="" @click="addNlpBranch" v-if="isShowAddNlpBack && !showDetail">新增一个NLP返回分支</el-button>
		</p>
		<!-- 新增一个NLP返回分支 -->
		<template v-if="nlpOptions.length !== 0">
			<div class="nlpBranch" v-for="(item, index) in nlpOptions" :key="index">
				<span class="branch-text">分支{{ getBranchIndex(index) }}</span>
				<el-form-item label="如果NLP返回" :prop="`${prop}.${index}.nlpBack`" class="nlpBranch-back" required="true" :rules="rules.nlpBack">
					<el-select v-model="item.nlpBack" :disabled="showDetail" placeholder="请选择NLP返回的结果值" class="nlpsBranchList-select" id="nlpsBranchList-select">
						<el-option v-for="sItem in nlpBackList" :key="sItem.key" :label="sItem.key" :value="sItem.key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="下一步" :prop="`${prop}.${index}.nextStepsNlp`" style="margin-left: 10px" required="true" :rules="rules.nextStepsNlp">
					<el-select
						v-model="item.nextStepsNlp"
						:disabled="showDetail"
						placeholder="下一步操作"
						@change="onChange('nlpOptions.' + index + '.nextStepsNlp')"
						class="nlpsBranchList-select"
						id="nlpsBranchList-select"
					>
						<el-option v-for="item in nextStepOption" :key="item.value" :label="item.taskName" :value="item.taskId"> </el-option>
					</el-select>
				</el-form-item>
				<div class="btn" v-if="!showDetail">
					<img @click="deleteBranch(index)" class="del-btn" :src="deleteImage" />
					<img @click="addBranch" class="add-btn" :src="insertImage" v-if="isActiveIcon && index === nlpOptions.length - 1 && index !== 5" />
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import { getThirdNlpList } from '@/api/api';
import AIWorkflow from '@/modules/workFlow.js';
import delGroupImg from '@/assets/img/icon/del_group.png';
import addGroupImg from '@/assets/img/icon/add_group.png';
export default {
	name: '',
	components: {},
	props: {
		value: {
			type: Array,
			required: true,
			default: () => []
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		},

		showDetail: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		const vaildateRepeats = (rule, value, callback) => {
			let arr = this.nlpOptions.filter(item => item.nlpBack === value);
			if (arr.length > 1) {
				return callback(new Error('当前选择存在重复选项，请检查后重新选择'));
			}
			return callback();
		};
		return {
			isShowNlpBranch: false, // NLP返回分支显示隐藏
			isActiveIcon: true, // icon图标显示隐藏
			isShowAddNlpBack: true, //新增一个NLP返回分支按钮
			deleteImage: delGroupImg,
			insertImage: addGroupImg,
			nlpOptions: [], // 如果NLP返回
			nlpBackList: [],
			rules: {
				nlpBack: [
					{
						required: true,
						message: '请至少选择一个NLP返回标识',
						trigger: ['blur', 'change']
					},
					{
						validator: vaildateRepeats,
						trigger: ['blur', 'change']
					}
				],
				nextStepsNlp: [
					{
						required: true,
						message: '请选择下一步操作',
						trigger: 'change'
					}
				]
			}
		};
	},
	watch: {
		value: {
			handler(val) {
				this.nlpOptions = [...val];
			},
			deep: true
		}
	},
	mounted() {
		this.initNlpBack();
		const { nextStepOption } = AIWorkflow;
		this.nextStepOption = nextStepOption;
		this.nlpOptions = [...this.value];
		console.log('nlpOptions', this.nlpOptions);
		if (this.nlpOptions.length > 0) {
			this.isShowAddNlpBack = false;
		}
	},
	methods: {
		// 新增一个NLP返回分支
		addNlpBranch() {
			this.isShowNlpBranch = true;
			this.isShowAddNlpBack = false;
			if (this.nlpOptions.length === 0) {
				let nlpOptions = { nlpBack: '', nextStepsNlp: '' };
				this.nlpOptions.push(nlpOptions);
				this.$emit('input', this.prop, this.nlpOptions);
			}
		},
		// + 号icon 添加NLP分支
		addBranch() {
			let nlpOptions = { nlpBack: '', nextStepsNlp: '' };
			this.nlpOptions.push(nlpOptions);
			this.$emit('input', this.prop, this.nlpOptions);
		},
		// 删除NLP分支
		deleteBranch(index) {
			if (this.nlpOptions.length - 1 === 0) {
				this.isShowAddNlpBack = true;
				this.isShowNlpBranch = false;
			}
			this.nlpOptions.splice(index, 1);
			this.$emit('input', this.prop, this.nlpOptions);
		},
		// 点击 + 添加变量属性
		onAddVariable(value) {
			this.isShowUserAttribute = true;
			this.localUserAttribute = value;
		},
		// 获取NLP返回分支下标 例如：分支一
		getBranchIndex(value) {
			let result = '';
			switch (value) {
				case 0:
					result = '一';
					break;
				case 1:
					result = '二';
					break;
				case 2:
					result = '三';
					break;
				case 3:
					result = '四';
					break;
				case 4:
					result = '五';
					break;
				case 5:
					result = '六';
					break;
				default:
					result = '';
					break;
			}
			return result;
		},
		// 如果NLP返回初始化
		initNlpBack() {
			getThirdNlpList()
				.then(res => {
					this.nlpBackList = res.data.intent_points;
					console.log(this.nlpBackList, 'NLP返回分支');
					this.nlpOptions = [...this.value];
					console.log(this.nlpOptions);
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取NLP返回列表失败');
				});
		},
		onChange() {}
	}
};
</script>

<style lang="less" scoped>
.setting {
	padding: 14px;
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	text-align: left;
	.el-button {
		background-color: #fff;
		border: 1px solid #6384fe;
		color: #6384fe;
	}
}
.nlpBranch {
	width: calc(100% - 50px);
	height: 168px;
	background-color: #f9f9f9;
	margin-top: 15px;
	position: relative;
	p {
		margin: -13px 0 0 158px;
		color: #f56c6c;
	}
	.checkbox {
		float: right;
		margin: -30px 30px 0 0;
	}
	.nlpsBranchList-select {
		width: 96% !important;
	}
	#nlpsBranchList-select {
		width: 96% !important;
	}
	.branch-text {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		position: absolute;
		padding: 15px 0px 0px 30px;
	}
	.nlpBranch-back {
		padding-top: 10px;
		margin-left: 10px;
		padding-top: 50px;
	}
}
.btn {
	position: relative;
}
.add-btn {
	position: absolute;
	top: 0px;
	right: -30px;
}
.del-btn {
	position: absolute;
	top: -145px;
	right: -30px;
}
</style>
